import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

// 自定义switch开关
class CustomSwitch extends StatefulWidget {
  const CustomSwitch({
    super.key,
    required this.value,
    required this.onChanged,
    this.activeColor = const Color(0xff0076A9),
    this.trackColor = const Color.fromRGBO(238, 238, 238, 0.15),
    this.thumbColor = Colors.white,
    this.trackThumbColor = Colors.white,
  });
  // 开关状态
  final bool value;
  // 状态切换回调
  final ValueChanged<bool>? onChanged;
  // 未选中背景色
  final Color trackColor;
  // 选中背景色
  final Color activeColor;
  // 滑块颜色
  final Color thumbColor;
  // 未选中滑块颜色
  final Color trackThumbColor;

  @override
  State<CustomSwitch> createState() {
    return CustomSwitchState();
  }
}

class CustomSwitchState extends State<CustomSwitch> {
  late bool _thumbSelect;
  late Color _bgColor;
  late Color _thumbColor;
  late double _thumbLeft;
  late double _newOffset;

  @override
  void initState() {
    _thumbSelect = widget.value;
    _bgColor = _thumbSelect ? widget.activeColor : widget.trackColor;
    _thumbColor = _thumbSelect ? widget.thumbColor : widget.trackThumbColor;
    _thumbLeft = _thumbSelect ? 20.r : 4.r;
    super.initState();
  }

  @override
  void didUpdateWidget(covariant CustomSwitch oldWidget) {
    _thumbSelect = widget.value;
    _bgColor = _thumbSelect ? widget.activeColor : widget.trackColor;
    _thumbColor = _thumbSelect ? widget.thumbColor : widget.trackThumbColor;
    _thumbLeft = _thumbSelect ? 20.r : 4.r;
    // Logger().d('更新页面');
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    _bgColor = _thumbSelect ? widget.activeColor : widget.trackColor;
    _thumbColor = _thumbSelect ? widget.thumbColor : widget.trackThumbColor;
    _thumbLeft = _thumbSelect ? 20.r : 4.r;
    return GestureDetector(
      onTap: () {
        HapticFeedback.mediumImpact();
        setState(() {
          _thumbSelect = !_thumbSelect;
          widget.onChanged!(_thumbSelect);
        });
      },
      onHorizontalDragEnd: (details) {
        if (_newOffset + 11.r >= 23.r) {
          _thumbSelect = true;

          widget.onChanged!(_thumbSelect);
        } else {
          _thumbSelect = false;
          widget.onChanged!(_thumbSelect);
        }
        // print('手指抬起$_newOffset');
        HapticFeedback.mediumImpact();
        setState(() {});
      },
      onHorizontalDragStart: (details) {
        _newOffset = _thumbLeft;
        // print('滑动开始');
      },
      onHorizontalDragUpdate: (value) {
        double newOffset = _newOffset + value.delta.dx;

        // print('滑动中$newOffset');

        if (newOffset >= 4 && newOffset <= 20) {
          _newOffset = newOffset;
        }
      },
      child: Stack(
        children: [
          Container(
            width: 46.r,
            height: 30.r,
            decoration: BoxDecoration(
                color: _bgColor, borderRadius: BorderRadius.circular(15).r),
          ),
          AnimatedPositioned(
            top: 4.r,
            left: _thumbLeft,
            duration: const Duration(milliseconds: 100),
            child: Container(
              width: 22.r,
              height: 22.r,
              decoration: BoxDecoration(
                  color: _thumbColor,
                  borderRadius: BorderRadius.circular(11).r),
            ),
          )
        ],
      ),
    );
  }
}
